import { defineComponent, ref } from "vue";
import Title from "./components/title";
// import Progress from "./components/progress";
import * as echarts from "echarts";
const Right = defineComponent({
	setup() {
		return () => {
			return (
				<div class="monitor-screen-right">
					{/* 现场报警数量排名 */}
					<AlarmCountRank />
					{/* 近7天报警统计 */}
					<AlarmStat />
					{/* 设备监控视频 */}
					<VidexBox />
				</div>
			);
		};
	}
});
export default Right;

import { trendAlarm } from "@/api/modules/iot/alarm";
// import { getAlarmTop } from "@/api/modules/video";
import { dayjs } from "element-plus";
import VideoPanel from "@/components/VideoPanel";
/** 现场报警数量排名*/
const AlarmCountRank = defineComponent({
	setup() {
		const defaultData = ref([
			{ label: "自动允许", value: 153, unit: "变量" },
			{ label: "运行状态", value: 153, unit: "变量" },
			{ label: "故障状态", value: 153, unit: "变量" },
			{ label: "累积功耗", value: 153, unit: "kW/h" },
			{ label: "运行时间", value: 153, unit: "分钟" }
		]);
		return () => {
			return (
				<div class={"alarm-count-rank"}>
					<Title title="1#泵状态显示" />
					<div class={"alarm-count-rank-content"}>
						{defaultData.value.map((item: any) => {
							return (
								<div class={"count-rank-item cursor-pointer"}>
									<div class="flex-1">{item.label}</div>
									<div class={`w-12  mr-4 ${item.unit == "变量" ? "dot" : "text-blue-500 text-right"} `}>
										{item.unit == "变量" ? "" : "###"}
									</div>
									<div class="w-12">{item.unit}</div>
								</div>
							);
						})}
					</div>
				</div>
			);
		};
	}
});

// 近7天报警统计
const AlarmStat = defineComponent({
	setup() {
		const stateDay = 7;
		// 获取统计数据
		const getState = async () => {
			// 告警统计
			let res = (await trendAlarm({
				timeStamp: dayjs().subtract(stateDay, "d").format("YYYY-MM-DD 00:00:00") + "~" + dayjs().format("YYYY-MM-DD 23:59:59")
			})) as any;
			const xData: any = [],
				yData: any = [];
			let currentDay = dayjs();
			for (let i = 0; i < stateDay; i++) {
				currentDay = dayjs().subtract(i, "d");
				xData.unshift(currentDay.format("MM-DD"));
				yData.unshift(res.result[currentDay.format("YYYY-MM-DD")]?.total || 0);
			}
			InitEchart(xData, yData);
		};
		const InitEchart = (xData: any, yData: any) => {
			let myChart = echarts.init(document.getElementById("alarmStat") as HTMLElement);
			const option = {
				grid: {
					left: 0,
					right: 0,
					top: 30,
					bottom: 30
				},
				xAxis: {
					type: "category",
					boundaryGap: true,
					axisTick: {
						length: 3
					},
					axisLine: {
						lineStyle: {
							color: "#3E435D"
						}
					},
					axisLabel: {
						fontWeight: "bold",
						color: "#ffffff"
					},
					data: xData
				},
				yAxis: {
					type: "value",
					axisLine: {
						show: false
					},
					axisLabel: {
						show: false
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: "#312F3B",
							type: "dashed"
						}
					}
				},
				color: ["#F9BA0B"],
				series: [
					{
						data: yData,
						type: "bar",
						barWidth: "55%",
						showBackground: true,
						backgroundStyle: {
							color: "rgba(255, 255, 255, 0.04)"
						},
						label: {
							show: true,
							position: "top",
							color: "#ffffff",
							fontWeight: 400,
							fontFamily: "HarmonyOSSC",
							fontSize: 14
						},
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "rgba(249, 186, 11, 0.06)"
								},
								{
									offset: 1,
									color: "rgba(249, 186, 11, 0.28)"
								}
							])
						}
					}
				]
			};
			myChart.setOption(option);
		};
		nextTick(() => {
			getState();
		});
		const defaultData = ref([
			{ label: "自动允许", value: 153, unit: "变量" },
			{ label: "运行状态", value: 153, unit: "变量" },
			{ label: "故障状态", value: 153, unit: "变量" },
			{ label: "累积功耗", value: 153, unit: "kW/h" },
			{ label: "运行时间", value: 153, unit: "分钟" }
		]);
		return () => {
			return (
				<div class={"alarm-stat"}>
					<Title title="2#泵状态显示" />
					<div class={"alarm-count-rank-content"}>
						{defaultData.value.map((item: any) => {
							return (
								<div class={"count-rank-item cursor-pointer"}>
									<div class="flex-1">{item.label}</div>
									<div class={`w-12  mr-4 ${item.unit == "变量" ? "dot" : "text-blue-500 text-right"} `}>
										{item.unit == "变量" ? "" : "###"}
									</div>
									<div class="w-12">{item.unit}</div>
								</div>
							);
						})}
					</div>
				</div>
			);
		};
	}
});

// 设备监控视频
const VidexBox = defineComponent({
	setup() {
		return () => {
			return (
				<div class={"videx-box"}>
					<Title title="主要报警类别" />
					<VideoPanel class="video" videoUrl="https://fh.sansaniot.com/live/34020000000019000001-34020000001320019001-0101.flv" />
				</div>
			);
		};
	}
});
